<script>
import {  useRouter } from "vue-router";
import {reactive,} from 'vue'
export default {
    setup() {

        let data = reactive({
            flag:false
        })

        let router = useRouter();
        let back = () => {
            router.back()
        }


        let getFlag = () => {
           data.flag = !data.flag
           console.log(data.flag);
        }

        return{
            back,
            data,
            getFlag
        }
    },
}
</script>

<template>
    <div class="phone_box">
        <div class="container">
            <div class="phone_top">
                <span class="iconfont icon-arrow-left" @click="back"></span>
            </div>
            <div class="phone_main">
                <div class="title">
                    <h1 v-show="!data.flag">请输入原手机号</h1><h1 v-show="data.flag">请输入新手机号</h1>
                    <p>验证当前账号</p>
                </div>
                <div class="yuan">
                    <input type="text" v-show="!data.flag"  placeholder="请输入原手机号">
                    <input type="text" v-show="data.flag"  placeholder="请输入新手机号">
                </div>
                <div class="captcha">
                    <div class="input">
                        <input type="text">
                        <input type="text">
                        <input type="text">
                        <input type="text">
                    </div>
                    <p>获取验证码</p>
                </div>
                <div class="button">
                    <button @click="getFlag" v-show="!data.flag" >下一步</button>
                    <button v-show="data.flag">更换绑定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
@import "../assets/font-two/iconfont.css";

.phone_box {
    .phone_top {
        padding: 45px 20px;

        span {
            font-size: 20px;
        }
    }
    .phone_main{
        padding: 0 40px;
        .con{
            display: none;
        }
        .cons{
            display: block;
        }
        .title{
            h1{
                font-weight: 600;
                
            }
            p{
                color: #a3a3a3;
                font-size: 13px;
                margin-top: 5px;
            }
        }
        .yuan{
            margin-top: 40px;
            input{
                width: 100%;
                border: none;
                border-bottom: 1px solid #eee;
                padding: 12px 0;
                font-size: 20px;
            }
        }
        .captcha{
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            .input{
                input{
                    width: 30px;
                    border: none;
                    border-bottom: 1px solid #eee;
                    margin-right: 10px;
                    font-size: 20px;
                    text-align: center;
                }
            }
            p{
                color: #bababa;
                font-size: 15px;
            }
        }
        .button{
            width: 100%;
            height: 45px;
            margin-top: 45px;
            button{
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 20px;
                font-size:17px;
                color: #fff;
                background-color: #fed3bd;
            }
        }
    }
}
</style>